import React, {useEffect, useRef} from 'react'
import {createStyles} from "antd-style";
import photoControl from './classes/PhotoControl'

const useStyle = createStyles(({css, token}) => {
    return {
        container: css`
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
            max-width: 100vw;
            max-height: 10vh;
            background-color: rgba(0, 0, 0, 0.3);
        `
    }
})

const InfoViewer: React.FC = () => {
    const styles = useStyle().styles;
    const indexC = useRef<HTMLTableCellElement>();
    const nameC = useRef<HTMLTableCellElement>();
    const countC = useRef<HTMLTableCellElement>();

    useEffect(() => {
        let ic = indexC.current
        let nc = nameC.current
        let cc = countC.current

        photoControl.addToUpdate(() => {
            const photoInfoElement = photoControl.photoInfo[photoControl.getContainer()]
            ic.innerText = String(photoControl.getContainer())
            nc.innerText = photoInfoElement.name
            cc.innerText = String(photoInfoElement.size)
        })
    }, []);

    return (
        <div className={styles.container} onClick={() => {
            location.href = "/"
        }}>
            <table>
                <tbody>
                <tr>
                    <td>索引：</td>
                    <td ref={indexC}></td>
                </tr>
                <tr>
                    <td>名称：</td>
                    <td ref={nameC}></td>
                </tr>
                <tr>
                    <td>总量：</td>
                    <td ref={countC}></td>
                </tr>
                </tbody>
            </table>
        </div>
    )
}

export default InfoViewer